<template>
  <div class="_wz_cent_main _wz_deptDetails">
    <Row :gutter="10" style="height: 100%;">
      <Col span="12" style="height: 100%;">
        <Card dis-hover :bordered="true" class="_wz_deptDetails_noTitle" style="height: 140px;">
          <Row :gutter="10" style="height: 100%;">
            <Col span="4" class="_wz_deptDetails_statistical">
              <img src="~@/assets/icon_personnel.png"/>
              <div style="font-size: 24px;">{{!!unitCountStatistics.driverCount?unitCountStatistics.driverCount:0}}</div>
              <div style="font-size: 12px;color:#ada2a2;">人员总数</div>
            </Col>
            <Col span="4" class="_wz_deptDetails_statistical">
              <img src="~@/assets/icon_Vehicle1.png"/>
              <div style="font-size: 24px;">{{!!unitCountStatistics.vehicleCount?unitCountStatistics.vehicleCount:0}}</div>
              <div style="font-size: 12px;color:#ada2a2;">车辆总数</div>
            </Col>
            <Col span="4" class="_wz_deptDetails_statistical">
              <img src="~@/assets/icon_znetwork.png"/>
              <div style="font-size: 24px;">{{!!unitCountStatistics.coreVehicleInternetCount?unitCountStatistics.coreVehicleInternetCount:0}}</div>
              <div style="font-size: 12px;color:#ada2a2;">入网车辆数</div>
            </Col>
            <Col span="4" class="_wz_deptDetails_statistical">
              <img src="~@/assets/icon_real_time.png"/>
              <div style="font-size: 24px;">{{!!unitCountStatistics.realOnlineNumber?unitCountStatistics.realOnlineNumber:0}}</div>
              <div style="font-size: 12px;color:#ada2a2;">实时在线数</div>
            </Col>
            <Col span="4" class="_wz_deptDetails_statistical">
              <img src="~@/assets/icon_Online.png"/>
              <div style="font-size: 24px;">{{!!unitCountStatistics.todayOnlineNumber?unitCountStatistics.todayOnlineNumber:0}}</div>
              <div style="font-size: 12px;color:#ada2a2;">今日在线数</div>
            </Col>
            <Col span="4" class="_wz_deptDetails_statistical">
              <img src="~@/assets/icon_Alarm.png"/>
              <div style="font-size: 24px;">{{!!unitCountStatistics.alarmVehicle?unitCountStatistics.alarmVehicle:0}}</div>
              <div style="font-size: 12px;color:#ada2a2;">报警车辆数(日)</div>
            </Col>
          </Row>
        </Card>
<!--        制度-->
        <deptPortraitDetails @details="details" style="height:  calc(100% - 340px - 140px - 20px);margin: 10px 0;border-radius: 4px;" :seeDeptData="seeDeptData"></deptPortraitDetails>
        <Row :gutter="10" style="height:340px;">
          <Col span="8" style="height: 100%;">
            <Card dis-hover :bordered="true" class="_wz_dept_certificate">
              <p slot="title">道路经营许可证</p>
              <p slot="extra"><span class="_wz_userPortrait_details" @click="details('道路经营许可证')"><Icon type="ios-search" size="18" /></span></p>
              <div style="height: 100%;" v-if="!!safetyQualification.certificateBusiness">
                <viewer class="_wz_dept_certificate_img">
                  <img :src="apiUrl.imgUrl + safetyQualification.certificateBusiness.certificateImg" @error="public.imgDispose">
                </viewer>
                <div style="text-align: center;">
                  <Tag color="error" v-if="safetyQualification.certificateBusiness.certificateState == 2">已逾期</Tag>
                  <Tag color="blue" v-else>已生效</Tag>
                </div>
                <div class="_wz_dept_certificate_title">
                  <div>经营许可证：<span>{{ !!safetyQualification.certificateBusiness.certificateNo?safetyQualification.certificateBusiness.certificateNo:'--' }}</span></div>
                  <div>有效日期：
                    <span>
                    {{ !!safetyQualification.certificateBusiness.certificateFoundDate ? safetyQualification.certificateBusiness.certificateFoundDate:'--' }}
                  </span>
                       至
                    <span>
                      {{ !!safetyQualification.certificateBusiness.certificateDueDate ? safetyQualification.certificateBusiness.certificateDueDate:'--' }}
                    </span>
                  </div>
                  <div style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;white-space: inherit;">
                    经营类型：<span>{{ !!safetyQualification.certificateBusiness.certificateScope ? safetyQualification.certificateBusiness.certificateScope:'--' }}</span></div>
                </div>
              </div>
              <div v-else style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                <img src="@/assets/error-page/emptyImage.svg">
                <div style="">暂无数据</div>
              </div>
            </Card>
          </Col>
          <Col span="8" style="height: 100%;">
            <Card dis-hover :bordered="true" class="_wz_dept_certificate">
              <p slot="title">安全生产标准化</p>
              <p slot="extra"><span class="_wz_userPortrait_details" @click="details('安全生产标准化')"><Icon type="ios-search" size="18" /></span></p>
              <div style="height: 100%;"  v-if="!!safetyQualification.certificateCriterionList && safetyQualification.certificateCriterionList.id">
                <viewer class="_wz_dept_certificate_img">
                  <img :src="apiUrl.imgUrl + safetyQualification.certificateCriterionList.certificateImg" @error="public.imgDispose">
                </viewer>
                <div style="text-align: center;">
                  <Tag color="blue" v-if="safetyQualification.certificateCriterionList.certificateState == 1">已生效</Tag>
                  <Tag color="error" v-else-if="safetyQualification.certificateCriterionList.certificateState == 2">已逾期</Tag>
                  <Tag color="warning" v-else>办理中</Tag>
                </div>
                <div class="_wz_dept_certificate_title">
                  <div>证书编号：<span>{{ !!safetyQualification.certificateCriterionList.certificateNo?safetyQualification.certificateCriterionList.certificateNo:'--' }}</span></div>
                  <div>达标等级：
                    <span>
                      <template v-if="!!safetyQualification.certificateCriterionList.certificateLevel">
                        <template v-if="safetyQualification.certificateCriterionList.certificateLevel == 1">一级</template>
                        <template v-if="safetyQualification.certificateCriterionList.certificateLevel == 2">二级</template>
                        <template v-if="safetyQualification.certificateCriterionList.certificateLevel == 3">三级</template>
                      </template>
                      <template v-else>--</template>
                    </span>
                  </div>
                  <div>经营类型：<span>{{ !!safetyQualification.certificateCriterionList.certificateMold?safetyQualification.certificateCriterionList.certificateMold:'--' }}</span></div>
                  <div>有效日期：
                    <span>
                      {{ !!safetyQualification.certificateCriterionList.certificateReleaseDate?safetyQualification.certificateCriterionList.certificateReleaseDate:'--' }}
                    </span>
                       至
                    <span>
                      {{ !!safetyQualification.certificateCriterionList.certificateDueDate?safetyQualification.certificateCriterionList.certificateDueDate:'--' }}
                    </span>
                  </div>
                </div>
              </div>
              <div v-else style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                <img src="@/assets/error-page/emptyImage.svg">
                <div style="">暂无数据</div>
              </div>
            </Card>
          </Col>
          <Col span="8" style="height: 100%;">
            <!--                道路经营许可证 certificateBusiness   安全生产标准化 certificateCriterionList   安全管理人员 certificateSafetyList-->
            <Card dis-hover :bordered="true" class="_wz_dept_certificate">
              <p slot="title">安全管理人员</p>
              <p slot="extra"><span class="_wz_userPortrait_details" @click="details('安全管理人员')"><Icon type="ios-search" size="18" /></span></p>
              <div style="height: 100%;" v-if="!!safetyQualification.certificateSafetyList && safetyQualification.certificateSafetyList.length > 0">
                <Carousel style="height: 100%;" :radius-dot="true" :autoplay="autoplay"  @mouseover.native="autoplay = false" @mouseleave.native="autoplay = true">
                  <template v-for="item in safetyQualification.certificateSafetyList">
                      <CarouselItem style="height: 100%;">
                        <viewer class="_wz_dept_certificate_img">
                          <img :src="apiUrl.imgUrl + item.certificateImg" @error="public.imgDispose">
                        </viewer>
                        <div style="text-align: center;">
                          <Tag color="blue" v-if="item.certificateState == 1">已生效</Tag>
                          <Tag color="error" v-else>已逾期</Tag>
                        </div>
                        <div class="_wz_dept_certificate_title">
                          <div>证书编号：<span>{{ !!item.certificateNo?item.certificateNo:'--' }}</span></div>
                          <div>人员名称：<span>{{ !!item.name?item.name:'--' }}</span></div>
                          <div>证书类型：<span>{{ !!item.certificateType?item.certificateType:'--' }}</span></div>
                          <div>有效日期：
                            <span>{{ !!item.certificateReleaseDate?item.certificateReleaseDate:'--' }}</span>
                               至
                            <span>{{ !!item.certificateDueDate?item.certificateDueDate:'--' }}</span>
                          </div>
                        </div>
                      </CarouselItem>
                    </template>
                </Carousel>
              </div>
              <div v-else style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                <img src="@/assets/error-page/emptyImage.svg" >
                <div style="">暂无数据</div>
              </div>
            </Card>
          </Col>
        </Row>
      </Col>
      <Col span="12" style="height: 100%;">
        <enterpriseData :deptUuid="deptUuid" v-if="!!deptUuid" @details="details"></enterpriseData>
      </Col>
    </Row>





    <Drawer :title="drawerTitle" v-model="drawerType" width="1000" :draggable="true">
      <companyDetails v-if="drawerType && drawerTitle == '企业详情'" :selectData="seeCarData"></companyDetails>
      <postResponsibility v-if="drawerType && drawerTitle == '岗位责任制度'" :seeCarData="seeCarData"></postResponsibility>
      <transportPermit v-if="drawerType && drawerTitle == '安全组织架构'" :seeCarData="seeCarData"></transportPermit>
      <certificateBusiness1 v-if="drawerType && drawerTitle == '日常管理制度'" :seeCarData="seeCarData"></certificateBusiness1>
      <deptSystemOperate v-if="drawerType && drawerTitle == '操作规程制度'" :seeCarData="seeCarData"></deptSystemOperate>
      <deptSystemMonitor v-if="drawerType && drawerTitle == '动态监控制度'" :seeCarData="seeCarData"></deptSystemMonitor>
      <certificateBusiness v-if="drawerType && drawerTitle == '道路经营许可证'" :seeCarData="seeCarData"></certificateBusiness>
      <certificateCriterion v-if="drawerType && drawerTitle == '安全生产标准化'" :seeCarData="seeCarData"></certificateCriterion>
      <safetyCertificate v-if="drawerType && drawerTitle == '安全管理人员'" :seeCarData="seeCarData"></safetyCertificate>
      <hiddenDangersTroubleshoot v-if="drawerType && drawerTitle == '隐患排查'" :seeCarData="seeCarData"></hiddenDangersTroubleshoot>
      <SafetyMeetings v-if="drawerType && drawerTitle == '安全例会'" :seeCarData="seeCarData"></SafetyMeetings>
      <transportVehicle v-if="drawerType && drawerTitle == '运营车辆'" :seeCarData="seeCarData"></transportVehicle>
      <travelLog v-if="drawerType && drawerTitle == '行车日志'" :seeCarData="seeCarData"></travelLog>
      <alarmParameter v-if="drawerType && drawerTitle == '报警趋势'" :seeCarData="seeCarData"></alarmParameter>
      <operatingMileage v-if="drawerType && drawerTitle == '营运里程'" :seeCarData="seeCarData"></operatingMileage>
      <Incumbency v-if="drawerType && drawerTitle == '企业人员'" :seeCarData="seeCarData"></Incumbency>
      <IncuTraiReco v-if="drawerType && drawerTitle == '学习记录'" :seeCarData="materialList"></IncuTraiReco>



    </Drawer>
  </div>
</template>
<script>

import enterpriseData from "./enterpriseData.vue";//企业右侧数据
import deptPortraitDetails from "./deptPortraitDetails.vue";//企业画像详情
import companyDetails from "../../components/main/companyDetails";//企业详情
import postResponsibility from "../safety/postResponsibility/postResponsibility";//岗位责任制度
import transportPermit from "../safety/safetyCertificate/transportPermit";//安全组织架构
import certificateBusiness1 from "../safety/architecture/certificateBusiness";//日常管理制度
import deptSystemOperate from "../safety/deptSystemOperate/deptSystemOperate";//操作规程制度
import deptSystemMonitor from "../safety/deptSystemMonitor/deptSystemMonitor";//动态监控制度
import certificateBusiness from "../safety/safetyCertificate/certificateBusiness";//道路经营许可证
import certificateCriterion from "../safety/certificateCriterion/certificateCriterion";//安全生产标准化
import safetyCertificate from "../safety/safetyCertificate/safetyCertificate";//安全管理人员
import hiddenDangersTroubleshoot from "../safety/risk/hiddenDangersTroubleshoot";//隐患排查
import SafetyMeetings from "../../components/safety/meetings/SafetyMeetings";//安全例会
import transportVehicle from "../management/transportVehicle/transportVehicle";//运营车辆
import travelLog from "../safety/operations/travelLog";//行车日志
import alarmParameter from "../management/operationMonitoring/alarmParameter";//报警趋势
import operatingMileage from "../management/operationMonitoring/operatingMileage";//营运里程
import Incumbency from "../educate/Employees/Incumbency";//企业人员
import IncuTraiReco from "../educate/TraiReco/IncuTraiReco";//培训记录




//排放标准


export default {
  components: {
    enterpriseData,//企业右侧数据
    deptPortraitDetails,//企业画像详情
    companyDetails,//企业详情
    postResponsibility,//岗位责任制度
    transportPermit,//安全组织架构
    certificateBusiness1,//日常管理制度
    deptSystemOperate,//操作规程制度
    deptSystemMonitor,//动态监控制度
    certificateBusiness,//道路经营许可证
    certificateCriterion,//安全生产标准化
    safetyCertificate,//安全管理人员
    hiddenDangersTroubleshoot,//隐患排查
    SafetyMeetings,//安全例会
    transportVehicle,//运营车辆
    travelLog,//行车日志
    alarmParameter,//报警趋势
    operatingMileage,//营运里程
    Incumbency,//企业人员
    IncuTraiReco,//培训记录
  },
  data() {
    return {
      drawerTitle:'',//弹框名称
      drawerType:false,//弹框状态
      unitCountStatistics:{},//各单位数量统计
      safetyQualification:{},
      seeCarData:{},

      autoplay:true,
      seeDeptData: {},
      deptUuid:'',
      materialList:{},
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态
    var that = this;
    resize();
    function resize() {
      if(true){
        // if(window.innerHeight < 900){
        var s = window.innerHeight / 938;
        // document.body.style.zoom = s;//1 - s + 1;
        document.body.style.transformOrigin = '0 0';
        document.body.style.transform = 'scale(' + s + ',' + s + ')';
        document.body.style.width = window.innerWidth / s + 'px';
        document.body.style.height = window.innerHeight / s + 'px';
      }else{
        // document.body.style.zoom = 1;
        document.body.style.transformOrigin = '0 0';
        document.body.style.transform = 'inherit';
        document.body.style.width = '100%';
        document.body.style.height = '100%';
      }
    }

    window.addEventListener('resize', () => {
      resize();
    }, false)
  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    //企业信息
    that.deptUuid = that.$route.query.uuid;
    that.seeCarData = {deptUuid:that.deptUuid};
    that.axios.post(that.apiUrl.webApi + "/deptPortrait/detailInfo", {deptUuid: that.deptUuid}).then(res => {
      if (!!res) {
        that.seeDeptData = res.data.data;
      }
    }).catch(err => {
      console.log('失败', err);
    })

    //各单位数量统计
    that.axios.post(that.apiUrl.webApi + "/deptPortrait/unitCountStatistics", {deptUuid: that.deptUuid}).then(res => {
      if (!!res) {
        that.unitCountStatistics = res.data.data;
      }
    }).catch(err => {
      console.log('失败', err);
    })



    //道路经营许可证 certificateBusiness   安全生产标准化 certificateCriterionList   安全管理人员 certificateSafetyList
    that.axios.post(that.apiUrl.webApi + "/deptPortrait/safetyQualification", {deptUuid: that.deptUuid}).then(res => {
      if (!!res) {
        that.safetyQualification = res.data.data;
      }
    }).catch(err => {
      console.log('失败', err);
    })
  },
  methods: {//执行的方法
    //查看详情
    details(name,data){
      // console.log(name,data)
      if(!!data){
        this.materialList = data;
      }
      this.drawerTitle = name;//弹框名称
      this.drawerType = true;//弹框状态
    },
  },
  watch: {//监听

  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_deptDetails {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  position: relative;
  padding: 10px 0 10px 10px;

  .ivu-card-body {
    padding: 8px !important;
    height: calc(100% - 51px);
  }

  ._wz_deptDetails_noTitle {
    .ivu-card-body {
      padding: 8px !important;
      height: 100%;
    }
  }

  ._wz_deptDetails_statistical {
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    img {
      width: 40px;
      //height: 100%;
      display: block;
    }

    i {
      font-size: 40px;
      line-height: 30px;
      display: block;
      margin: 0 0 10px;
    }

    div {
      font-size: 24px;
    }
  }

  ._wz_dept_certificate {
    height: 100%;
    background: #454a5d;
    color: #fff !important;

    .ivu-card-head {
      border-bottom: 1px solid #858dad;

      p {
        color: #fff;
      }
    }

    ._wz_dept_certificate_img {
      height: 100px;
      margin: 0 auto 10px;
      text-align: center;
      width: 160px;
      background: #383c4e;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        max-width: 80%;
        max-height: 80%;
        min-width: 30%;
        min-height: 30%;
      }
    }

    ._wz_dept_certificate_title {
      line-height: 30px;
      letter-spacing: 1px;

      div {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        span {
          margin: 0 5px;
        }
      }
    }

  }

  .ivu-carousel-dots {
    li {
      button {
        width: 10px;
        height: 10px;
        background: #fff;
      }
    }

    .ivu-carousel-active {
      button {
        width: 16px!important;
        border-radius: 10px;
      }
    }
  }



  ._wz_vehiclePortrait_details {
    color: #5cadff;
    cursor: pointer;
  }

  ._wz_vehiclePortrait_details:hover {
    color: #2d8cf0;
  }
  ._wz_userPortrait_details {
    color: #ccc;
    cursor: pointer;
  }

  ._wz_userPortrait_details:hover {
    color: #fff;
  }


}
</style>
